<template>
	<view class="exam-choose-item">
		<view class="choose-item" v-for="(it,ind) in list" :key="ind">
			<view class="item active" :style="{'background':it.userAnswer==0?'#f2f2f2':'#47ece8','color':it.userAnswer==0?'#999999':'#FFFFFF'}" >{{it.serial}}、{{it.serialContent}}</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		components:{
			
		},
		props: {
			list:{
				type:Array,
				default:[]
			},
			chooseStatus:{
				type:Number,
				default:1 //1 单选；2：多选；4：判断；
			}
		},
		data() {
			return {
				
			}
		},
		watch: {
			
		},
		created: function(e) {
			
		},
		beforeDestroy() {
			
		},
		methods: {
			dochoose(e){
				//console.log(this.list[e])
				//1 单选；2：多选；4：判断；
				if(this.chooseStatus == 1 || this.chooseStatus == 4){
					this.list.forEach((item,index)=>{
						this.list[index].userAnswer = 0
					})
					//this.list[e].serialContent +="1" 
					this.list[e].userAnswer = 1
					
				}else if(this.chooseStatus == 2){
					if(this.list[e].userAnswer == 0){
						this.list[e].userAnswer = 1
					}else{
						this.list[e].userAnswer = 0
					}
				}
				this.$emit('isChoose',this.list)
			}
		}
	}

</script>

<style lang="scss">
	%uni-flex {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	
	%uni-flex-inline {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.exam-choose-item{
		@extend %uni-flex;
		
		.choose-item{
			@extend %uni-flex;
			justify-content: center;
			align-items: center;
			width:100%;
			.item{
				@extend %uni-flex;
				height:90upx;
				width:80%;
				justify-content: center;
				align-items: flex-start;
				background: rgb(242, 242, 242);
				margin-top:20upx;
				border-radius: 50upx;
				padding-left:40upx;
			}
		}
		.view-btn{
			@extend %uni-flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
